<template>
	<view class="pics">
		<scroll-view class="left" scroll-y="">
			<view :class="active===index?'active':''" 
			v-for="(item,index) in tags" 
			:key ="item.tagId" @click="leftClickHandle(index,item.tagId)">
				{{item.name}}
			</view>
			
			<!-- <view class="active">登山攻略固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结固定</view>
			<view>活动总结</view>
			<view>活动总结</view> -->
		</scroll-view>
		<scroll-view class="right" scroll-y="">
			<!-- v-for="i in articleList" :key="i.articleId" -->
			<!-- <view class="item" >
				<image src="http://127.0.0.1:9000/testupload/20201119/u%3D3557543371%2C89408500%26fm%3D26%26gp%3D0.jpg"></image>
				<text>{{i.title}}这是标题</text>
			</view> -->
			
			<view class="news_item" v-for="i in articleList" :key="i.articleId">
				<view class="right" @click="check(i.articleId,i)">
					<view class="tit">{{i.title}}</view>
					<view class="info">
						<text>发表时间：{{i.publishTime}}</text>
						<text>作者：{{i.userName}}</text>
					</view>
				</view>
			</view>
			
			<!-- <view class="item" >
				<image src="http://127.0.0.1:9000/testupload/20201119/u%3D3557543371%2C89408500%26fm%3D26%26gp%3D0.jpg"></image>
				<text>{{i.title}}这是标题</text>
			</view> -->
			<text v-if='articleList.length === 0'>暂无数据</text>
		</scroll-view>
		<!-- <view>这是article</view> -->
		<uni-fab class="fab" :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="vertical" popMenu="ture"
		 @trigger="trigger"> 
			
		 </uni-fab>
	</view>

</template>

<script>
	//导入组件
	//import test from '../../components/test.vue'
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	export default {
		//接受上个页面传递的参数
		onLoad(options) {
			this.getTags();
			console.log(options);
		},
		onReady() {

		},
		//下拉刷新
		onPullDownRefresh() {
			/* console.log("下拉刷新了");
			this.pageIndex  = 1;
			this.activityList = [];
			setTimeout(()=>{
				this.getActivityList2(()=>{
					uni.stopPullDownRefresh();
				});
			},1000) */
			this.getTags();
		},
		//上拉加载
		onReachBottom() {
			console.log("页面触底了");
		},
		//数据绑定
		data() {
			return {
				msg: "hello-msg",
				url: "",
				pattern:{
					//color: "",
					buttonColor: "#007AFF"
				},
				content: [
					{iconPath:"static/home.png"},
					{text:"写文章"}
				],
				tags:[],
				articleList:[],
				active: 0,
			}
		},
		methods: {
			
			//悬浮按钮响应事件
			trigger(e) {
				console.log(e);
				this.content[e.index].active = !e.item.active;
				/* uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				}) */
				uni.navigateTo({
					url:"./writeArticle"
				});
			},
			
			//获取文章标签
			async getTags(){
				const res = await this.$myRequest({
					url:'/tags/getTagsList'
				})
				//console.log(res)
				this.tags = res.data.data;
				this.leftClickHandle(0,this.tags[0].tagId);
			},
			
			//点击标签显示右侧文章数据
			async leftClickHandle(index,id){
				this.active = index;
				//console.log(id);
				//获取右侧数据
				const res = await this.$myRequest({
					url: '/article/findArticleByTagId?tagId='+id
				})
				//console.log(res);
				this.articleList = res.data.data;
				console.log("articleList");
				console.log(this.articleList);
			},
			
			//查看文章
			check(articleId,item){
				console.log("点击了查看",articleId);
				console.log("点击了查看",item);
				//var itemStr = JSON.stringify(item);
				//uni.
				uni.navigateTo({
					url:"./articleDetail?articleId="+articleId+"&item="+item
				})
			},
		
			sendNum() {
				this.$emit('myEvent', this.msg);
			},
			clickHandle(num, e) {
				console.log("点击按钮了", num, e)
			},
			pullDown() {
				uni.startPullDownRefresh();
			},
			
			
			//发送请求
			get() {
				uni.request({
					//路径
					url: "",
					/* success(result) {
						console.log(result);
					}, */

					//请求的参数
					data: "aa",
					//请求类型，默认get
					method: "GET",
					//数据类型，默认json
					dataType: "json",
					//超时时间，单位ms，默认60000ms
					timeout: 60000,
					//成功之后的回调函数
					success: function(res) {
						console.log(res);
					},
					//接口调用失败的回调函数
					fail: function() {

					},
					//接口调用完成的回调函数
					complete: function() {

					}
				})
			}
		},
		//组件
		components: {
			uniFab
		}

	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.pics{
		height: 100%;
		display: flex;
		.left{
			height: 100%;
			width: 200rpx;
			border-right: 1px solid #eee;
			view{
				height: 60px;
				line-height: 60px;
				color: #333;
				text-align: center;
				font-size: 30rpx;
				border-top: 1px solid #eee;
			}
			.active{
				background: $shop-color;
				color: #fff;
			}
		};
		.right{
			height: 100%;
			width: 520rpx;
			margin: 10rpx auto;
			.news_item{
				height: 80rpx;
				background: #fff;
				display: flex;
				padding: 10rpx 20rpx;
				border-bottom: 1px solid $shop-color;
				image{
					width: 200rpx;
					height: 150rpx;
					max-width: 200rpx;
					min-width: 200rpx;
				}
				.right{
					margin-left: 15rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.tit{
						font-size: 30rpx;
					}
					.info{
						font-size: 20rpx;
						text:nth-child(2){
							margin-left: 30rpx;
						}
					}
				}
				
			}
			.item{
				image{
					width: 520rpx;
					height: 520rpx;
					border-radius: 5px;
				}
				text{
					font-size: 30rpx;
					line-height: 60rpx;
				}
			}
		}
	}
	.fab{
		
	}
</style>
